<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.editDialogVisible"
           @cancel="closeDialog"
           @ok="saveModel"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->

        <div class="row">
            <div class="col-xs-12">

                <vue-form-item label="触发关键字" :error-message="model.errors.keywords || errors.first('keywords')">
                    <input-text v-model:value="model.keywords"
                                v-validate="'required'"
                                label="触发关键字"
                                el-name="keywords"></input-text>
                </vue-form-item>
                <vue-form-item label="回复类型" :error-message="model.errors.type || errors.first('type')">
                    <input-radio v-model:value="model.type"
                                 v-validate="'required'"
                                 @tapEvent="linkTap"
                                 label="回复类型" :options="$store.state.replyTypeList"
                                 el-name="type"></input-radio>
                </vue-form-item>
                <vue-form-item label="回复内容" v-if="model.type==1"
                               :error-message="model.errors.content || errors.first('content')">
                    <input-text v-model="model.content"
                                label="回复内容"
                                v-validate="'required'"
                                el-name="content">
                    </input-text>
                </vue-form-item>
                <vue-form-item label="素材ID" v-if="model.type!=1"
                               :error-message="model.errors.source_id || errors.first('source_id')">
                    <div class="input-group">
                        <input-text
                                v-validate="'required'"
                                label="素材ID"
                                el-name="source_id"
                                v-model="model.source_id"></input-text>
                        <div class="input-group-btn">
                            <button class="btn btn-primary" id="media_id"
                                    v-on:click="openSelectDialog()"
                            >
                                <i class="fa fa-external-link"></i> 选择素材
                            </button>
                        </div>
                    </div>
                </vue-form-item>
            </div>
            <modal v-if="imgSelect"
                   @cancel="closeImgDialog"
                   @ok="saveImgDialog"
                   modal-title="素材选择"
                   elId="picture"
                   model-size="large">

                <!--<template slot="header">-->
                <!---->
                <!--</template>-->
                <div class="row">
                    <div class="col-lg-12" v-show="!SourceLoading">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title" style="  border-width: 0px;">
                                <h5>素材列表</h5>

                                <div class="ibox-tools">
                                    <!--<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">{{TypeArr[SourceType]}} <span class="caret"></span></button>-->
                                    <!--<ul class="dropdown-menu m-t-xs">-->
                                    <!--<li v-for="(item,key) in TypeArr" v-on:click="changType(key)" ><a href="javascript:;">{{item}}</a></li>-->
                                    <!--</ul>-->
                                </div>
                            </div>
                            <div class="ibox-content">
                                <masonry-table v-show="model.type==2" :data-source="tableImgList">

                                    <template slot="body" slot-scope="prop">
                                        <div class="col-md-2">
                                            <div class="ibox">
                                                <div class="ibox-content product-box"
                                                     v-bind:class="prop.item.id=== SourceSelect?'active':''"
                                                     v-on:click="changeSource(prop.item.id)"
                                                >
                                                    <div class="product-imitation center-block">
                                                        <img alt="图片" class="img-rounded img-lg center-block"
                                                             :title="prop.item.imgName" :src="prop.item.imgPath">
                                                    </div>
                                                    <div class="product-desc ">
                                                        <!--<span class="product-price">-->
                                                        <!--{{prop.item.imgName}}-->
                                                        <!--</span>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </masonry-table>
                                <masonry-table v-show="model.type==3" :data-source="tableSourceList">
                                    <template slot="body" slot-scope="props">
                                        <div class="col-md-2">
                                            <div class="ibox">
                                                <div class="ibox-content product-box"
                                                     v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                     v-on:click="changeSource(props.item.id)"
                                                >
                                                    <div class="product-imitation center-block">
                                                        <img alt="图片" class="img-rounded img-lg center-block"
                                                             :src="urlCheck(props.item.contexts[0].thumb_url)">
                                                    </div>
                                                    <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.contexts[0].title}}
                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </masonry-table>
                                <masonry-table v-show="model.type==4" :data-source="tableVoiceSourceList">
                                    <template slot="body" slot-scope="props">
                                        <div class="col-md-3">
                                            <div class="ibox">
                                                <div class="ibox-content product-box"
                                                     v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                     v-on:click="changeSource(props.item.id)"
                                                >
                                                    <div class="product-imitation center-block">
                                                        <i class="fa fa-play-circle"
                                                           style="width: 80px;height: 80px"></i>
                                                    </div>
                                                    <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.voiceName}}
                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </masonry-table>
                                <masonry-table v-show="model.type==5" :data-source="tableVideoSourceList">
                                    <template slot="body" slot-scope="props">
                                        <div class="col-md-2">
                                            <div class="ibox">
                                                <div class="ibox-content product-box"
                                                     v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                     v-on:click="changeSource(props.item.id)"
                                                >
                                                    <div class="product-imitation center-block">
                                                        <video :src="props.item.videoPath"></video>
                                                    </div>
                                                    <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.videoTitle}}
                        </span>
                                                        <!--<small class="text-muted">Category</small>-->
                                                        <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                                                        <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                                                        <!--<div class="row" v-if="key != 0">-->
                                                        <!--<div class="col-xs-8 ">-->
                                                        <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                                        <!--</div>-->
                                                        <!--<div class="col-xs-4">-->
                                                        <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                                        <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                    </div>
                                                    <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                                                    <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                                                    <!--<div class="panel-body" v-if="key == 0">-->
                                                    <!--<div class="img">-->
                                                    <!--<i class="default">封面图片</i>-->
                                                    <!--<img :src="context.thumb_url ">-->
                                                    <!--<span class="text-left">{{context.title}}</span>-->
                                                    <!--</div>-->
                                                    <!--</div>-->
                                                    <!--<div class="panel-body" v-if="key != 0">-->
                                                    <!--<div class="text">-->
                                                    <!--<h4>{{context.title}}</h4>-->
                                                    <!--</div>-->
                                                    <!--<div class="img">-->
                                                    <!--<img :src="context.thumb_url ">-->
                                                    <!--<i class="default">缩略图</i>-->
                                                    <!--</div>-->
                                                    <!--</div>-->
                                                    <!--</div>-->
                                                    <!--</div>-->
                                                    <!--<div class="m-t text-righ">-->
                                                    <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                                                    <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                                                    <!--</div>-->
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </masonry-table>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12" v-show="SourceLoading">
                        <div class="spiner-example">
                            <div class="sk-spinner sk-spinner-cube-grid">
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                                <div class="sk-cube"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </modal>
        </div>


    </modal>


</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url: '/api/WeChat/WeChatImg',
                }),
                SourceList: this.$listDataSource({
                    url: '/api/WeChat/WeChatArt',
                }),
                VoiceList: this.$listDataSource({
                    url: '/api/WeChat/WeChatVoice',
                }),
                VideoList: this.$listDataSource({
                    url: '/api/WeChat/WeChatVideo',
                }),
                imgSelect: false,
                refreshImgList: true,
                refreshSourceList: true,
                refreshVoiceSourceList: true,
                refreshVideoSourceList: true,
                SourceSelect: '',
                SourceLoading: false,
                model: this.$modelDataSource({
                    url: 'api/WeChat/WeChatReply',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        keywords: '',
                        type: 1,
                        content: '',
                        source_id: '',
                        w_id: 0,
                    }
                })
            };
        },
        methods: {
            urlCheck: function (url) {
                if (url) {
                    return url
                } else {
                    return 'http://tjise.daxuefun.cn/images/failed.png'
                }
            },
            closeDialog: function () {
//                console.log(11);
                this.stateManager.editModelId = 0;
                this.stateManager.editDialogVisible = false;
            },
            linkTap:function () {
              this.model.content='';
              this.model.source_id='';
            },
            saveModel: function () {
//                ladda.start();
                let self = this;

                self.model.w_id = self.$store.state.on_line_weChat_id;
                self.validate(function () {
                    if(self.model.type ==1){
                        if(self.model.content ==''){
                            return false
                        }
                    }else{
                        if(self.model.source_id ==''){
                            return false
                        }
                    }
                    self.model.save(function () {
                        self.model.reset();
                        self.closeDialog();
                        self.stateManager.refreshList = true;
                        toastr.success('保存成功！');
                    }, function () {
                        if (self.model.errors.permissions_errors) {
                            toastr.error(self.model.errors.permissions_errors);
                        }
                    });
                });
            },

            validate: function (successCallback, failedCallback) {
                this.$validator.validateAll().then(() => {
                    // eslint-disable-next-line
                    console.log('验证通过');
                    typeof successCallback === 'function' && successCallback();
                }).catch(() => {
                    // eslint-disable-next-line
                    console.log('验证未通过');
                    typeof failedCallback === 'function' && failedCallback();
                });

            },
            changeSource(id) {
                this.SourceSelect = id;
            },
            openSelectDialog: function () {
                this.imgSelect = true;
            },
            closeImgDialog: function () {
                if(this.SourceLoading ==false){
                    this.imgSelect = false;
                    this.SourceSelect = '';
                }
            },
            saveImgDialog: function () {
                let self = this;
                self.SourceLoading = true;
                axios.post('wechat/SourceUpload', {
                    'w_id': self.$store.state.on_line_weChat_id,
                    'type': self.model.type - 1,
                    'id': self.SourceSelect,
                }).then(function (res) {
                    self.SourceLoading = false;
                    console.log(res.data, res.data.media_id);
                    self.model.source_id = res.data.media_id;
                    self.closeImgDialog();
                    toastr.success('添加成功！');
                }).catch(function (res) {
                    self.SourceLoading = false;
                    console.log(res);
                    toastr.error('添加失败');
                })
            },
        },
        computed: {
            modalTitle: function () {
                if (this.model.id === 0) {
                    return '添加自动回复';
                } else {
                    return '编辑自动回复';
                }
            },
            tableImgList() {
                if (this.refreshImgList) {
                    // console.log(this.SourceType)
                    this.list.fetch();
                    this.refreshImgList = false;
                }
                return this.list;
            },
            tableSourceList() {
                if (this.refreshSourceList) {
                    // console.log(this.SourceType)
                    this.SourceList.fetch();
                    this.refreshSourceList = false;
                }
                return this.SourceList;
            },
            tableVoiceSourceList() {
                if (this.refreshVoiceSourceList) {
                    // console.log(this.SourceType)
                    this.VoiceList.fetch();
                    this.refreshVoiceSourceList = false;
                }
                return this.VoiceList;
            },
            tableVideoSourceList() {
                if (this.refreshVideoSourceList) {
                    // console.log(this.SourceType)
                    this.VideoList.fetch();
                    this.refreshVideoSourceList = false;
                }
                return this.VideoList;
            },
        },
        watch: {
            'stateManager.editModelId': function (newValue) {
                this.model.fetch(newValue);
            },
        }
    }
</script>
<style scoped>
    .content-title {
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .product-imitation {
        padding: 0px;
    }

    .product-desc {
        padding: 0px;

    }
    video{
        width: 100% !important;
        height:80px !important;
    }
</style>